<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>nCov-全国分布图</title>
    <link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.css}">
    <link rel="stylesheet" th:href="@{/css/common.css}">
</head>
<body>
<div th:insert="~{common/header::header1}"></div>
<div class="container">
    <div class="row">
        <div class="col-md-12" style="background-color:#fff;margin-bottom: 5px;">
            <a class="btn-primary btn-sm" th:href="@{/}" style="position: fixed;right: 10px">国内数据</a>
            <div id="myMap" style="height: 600px;"></div>
        </div>
    </div>
    <div class="row" style="height: 400px;overflow: auto">
        <div class="col-md-12" style="background-color: #fff">
            <table class="table table-hover table-bordered table-striped">
                <thead>
                <tr>
                    <th>国家</th>
                    <th>确诊人数</th>
                    <th>治愈人数</th>
                    <th>死亡人数</th>
                    <th>疑似人数</th>
                </tr>
                </thead>
                <tbody id="tbody1"></tbody>
            </table>
        </div>
    </div>
    <div class="row" style="margin-top: 5px">
        <div class="col-md-12">
            <div id="myChart2" style="height: 500px;border: 1px solid gray;background-color:#fff;"></div>
        </div>
    </div>
    <div class="row" style="margin-top: 5px">
        <div class="col-md-12">
            <div id="myChart3" style="height: 500px;border: 1px solid gray;background-color:#fff;"></div>
        </div>
    </div>
</div>

</body>
<script th:src="@{/jquery/jquery-3.5.1.js}"></script>
<script th:src="@{/bootstrap/js/bootstrap.js}"></script>
<script th:src="@{/js/echarts.min.js}"></script>
<script th:src="@{/js/world.js}"></script>
<script th:inline="javascript">
    // 将图表实例化和容器关联
    var myChart = echarts.init(document.querySelector('#myMap'));
    var myChart2 = echarts.init(document.querySelector('#myChart2'));
    var myChart3 = echarts.init(document.querySelector('#myChart3'));
    // 配置图表数据信息
    var option = {
        title:{
            // 标题
            text: 'nCov-全球疫情分布图',
            subtext: '疫情专题',
            left: 'center'
        },
        tooltip: {},
        // 图表背景色
        backgroundColor:'#f7f7f7',
        visualMap:{
            type: "piecewise",
            pieces: [
                {gt: 100000},  // (900, 1500]
                {gt: 10000, lte: 99999},  // (310, 1000]
                {gt: 1000, lte: 9999},   // (200, 300]
                {gt: 100, lte: 999},   // (200, 300]
                {gt: 1, lte: 99},       // (10, 200]
                {value:0}
            ],
            inRange:{
                color:['#e2ebf4','#faebd2','#e9a188','#d56355','#bb3937','#772526']
            }
        },
        series:[
            {
                name: '累计确诊人数',
                type: 'map',  // 当前图表类型
                map: 'world', // 当前地图是世界地图
                label:{
                    // 覆盖物设置
                    show: false
                },
                data:[],
                nameMap:{
                    'Singapore Rep.': '新加坡',
                    'Dominican Rep.': '多米尼加',
                    'Palestine': '巴勒斯坦',
                    'Bahamas': '巴哈马',
                    'Timor-Leste': '东帝汶',
                    'Afghanistan': '阿富汗',
                    'Guinea-Bissau': '几内亚比绍',
                    "Côte d'Ivoire": '科特迪瓦',
                    'Siachen Glacier': '锡亚琴冰川',
                    "Br. Indian Ocean Ter.": '英属印度洋领土',
                    'Angola': '安哥拉',
                    'Albania': '阿尔巴尼亚',
                    'United Arab Emirates': '阿联酋',
                    'Argentina': '阿根廷',
                    'Armenia': '亚美尼亚',
                    'French Southern and Antarctic Lands': '法属南半球和南极领地',
                    'Australia': '澳大利亚',
                    'Austria': '奥地利',
                    'Azerbaijan': '阿塞拜疆',
                    'Burundi': '布隆迪',
                    'Belgium': '比利时',
                    'Benin': '贝宁',
                    'Burkina Faso': '布基纳法索',
                    'Bangladesh': '孟加拉国',
                    'Bulgaria': '保加利亚',
                    'The Bahamas': '巴哈马',
                    'Bosnia and Herz.': '波斯尼亚和黑塞哥维那',
                    'Belarus': '白俄罗斯',
                    'Belize': '伯利兹',
                    'Bermuda': '百慕大',
                    'Bolivia': '玻利维亚',
                    'Brazil': '巴西',
                    'Brunei': '文莱',
                    'Bhutan': '不丹',
                    'Botswana': '博茨瓦纳',
                    'Central African Rep.': '中非',
                    'Canada': '加拿大',
                    'Switzerland': '瑞士',
                    'Chile': '智利',
                    'China': '中国',
                    'Ivory Coast': '象牙海岸',
                    'Cameroon': '喀麦隆',
                    'Dem. Rep. Congo': '刚果民主共和国',
                    'Congo': '刚果',
                    'Colombia': '哥伦比亚',
                    'Costa Rica': '哥斯达黎加',
                    'Cuba': '古巴',
                    'N. Cyprus': '北塞浦路斯',
                    'Cyprus': '塞浦路斯',
                    'Czech Rep.': '捷克',
                    'Germany': '德国',
                    'Djibouti': '吉布提',
                    'Denmark': '丹麦',
                    'Algeria': '阿尔及利亚',
                    'Ecuador': '厄瓜多尔',
                    'Egypt': '埃及',
                    'Eritrea': '厄立特里亚',
                    'Spain': '西班牙',
                    'Estonia': '爱沙尼亚',
                    'Ethiopia': '埃塞俄比亚',
                    'Finland': '芬兰',
                    'Fiji': '斐',
                    'Falkland Islands': '福克兰群岛',
                    'France': '法国',
                    'Gabon': '加蓬',
                    'United Kingdom': '英国',
                    'Georgia': '格鲁吉亚',
                    'Ghana': '加纳',
                    'Guinea': '几内亚',
                    'Gambia': '冈比亚',
                    'Guinea Bissau': '几内亚比绍',
                    'Eq. Guinea': '赤道几内亚',
                    'Greece': '希腊',
                    'Greenland': '格陵兰',
                    'Guatemala': '危地马拉',
                    'French Guiana': '法属圭亚那',
                    'Guyana': '圭亚那',
                    'Honduras': '洪都拉斯',
                    'Croatia': '克罗地亚',
                    'Haiti': '海地',
                    'Hungary': '匈牙利',
                    'Indonesia': '印度尼西亚',
                    'India': '印度',
                    'Ireland': '爱尔兰',
                    'Iran': '伊朗',
                    'Iraq': '伊拉克',
                    'Iceland': '冰岛',
                    'Israel': '以色列',
                    'Italy': '意大利',
                    'Jamaica': '牙买加',
                    'Jordan': '约旦',
                    'Japan': '日本',
                    'Kazakhstan': '哈萨克斯坦',
                    'Kenya': '肯尼亚',
                    'Kyrgyzstan': '吉尔吉斯斯坦',
                    'Cambodia': '柬埔寨',
                    'Korea': '韩国',
                    'Kosovo': '科索沃',
                    'Kuwait': '科威特',
                    'Lao PDR': '老挝',
                    'Lebanon': '黎巴嫩',
                    'Liberia': '利比里亚',
                    'Libya': '利比亚',
                    'Sri Lanka': '斯里兰卡',
                    'Lesotho': '莱索托',
                    'Lithuania': '立陶宛',
                    'Luxembourg': '卢森堡',
                    'Latvia': '拉脱维亚',
                    'Morocco': '摩洛哥',
                    'Moldova': '摩尔多瓦',
                    'Madagascar': '马达加斯加',
                    'Mexico': '墨西哥',
                    'Macedonia': '马其顿',
                    'Mali': '马里',
                    'Myanmar': '缅甸',
                    'Montenegro': '黑山',
                    'Mongolia': '蒙古',
                    'Mozambique': '莫桑比克',
                    'Mauritania': '毛里塔尼亚',
                    'Malawi': '马拉维',
                    'Malaysia': '马来西亚',
                    'Namibia': '纳米比亚',
                    'New Caledonia': '新喀里多尼亚',
                    'Niger': '尼日尔',
                    'Nigeria': '尼日利亚',
                    'Nicaragua': '尼加拉瓜',
                    'Netherlands': '荷兰',
                    'Norway': '挪威',
                    'Nepal': '尼泊尔',
                    'New Zealand': '新西兰',
                    'Oman': '阿曼',
                    'Pakistan': '巴基斯坦',
                    'Panama': '巴拿马',
                    'Peru': '秘鲁',
                    'Philippines': '菲律宾',
                    'Papua New Guinea': '巴布亚新几内亚',
                    'Poland': '波兰',
                    'Puerto Rico': '波多黎各',
                    'Dem. Rep. Korea': '朝鲜',
                    'Portugal': '葡萄牙',
                    'Paraguay': '巴拉圭',
                    'Qatar': '卡塔尔',
                    'Romania': '罗马尼亚',
                    'Russia': '俄罗斯',
                    'Rwanda': '卢旺达',
                    'W. Sahara': '西撒哈拉',
                    'Saudi Arabia': '沙特阿拉伯',
                    'Sudan': '苏丹',
                    'S. Sudan': '南苏丹',
                    'Senegal': '塞内加尔',
                    'Solomon Is.': '所罗门群岛',
                    'Sierra Leone': '塞拉利昂',
                    'El Salvador': '萨尔瓦多',
                    'Somaliland': '索马里兰',
                    'Somalia': '索马里',
                    'Serbia': '塞尔维亚',
                    'Suriname': '苏里南',
                    'Slovakia': '斯洛伐克',
                    'Slovenia': '斯洛文尼亚',
                    'Sweden': '瑞典',
                    'Swaziland': '斯威士兰',
                    'Syria': '叙利亚',
                    'Chad': '乍得',
                    'Togo': '多哥',
                    'Thailand': '泰国',
                    'Tajikistan': '塔吉克斯坦',
                    'Turkmenistan': '土库曼斯坦',
                    'East Timor': '东帝汶',
                    'Trinidad and Tobago': '特里尼达和多巴哥',
                    'Tunisia': '突尼斯',
                    'Turkey': '土耳其',
                    'Tanzania': '坦桑尼亚',
                    'Uganda': '乌干达',
                    'Ukraine': '乌克兰',
                    'Uruguay': '乌拉圭',
                    'United States': '美国',
                    'Uzbekistan': '乌兹别克斯坦',
                    'Venezuela': '委内瑞拉',
                    'Vietnam': '越南',
                    'Vanuatu': '瓦努阿图',
                    'West Bank': '西岸',
                    'Yemen': '也门',
                    'South Africa': '南非',
                    'Zambia': '赞比亚',
                    'Zimbabwe': '津巴布韦',
                    'Comoros': '科摩罗'
                }

            }
        ]
    };
    var option2 = {
        title: {
            text: '全球疫情累计趋势图',
            left: 'center'
        },
        tooltip: {
            trigger: 'axis'
        },
        legend: {
            data: ['累计确诊', '累计死亡', '累计治愈'],
            right: 'right'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            name: '人数',
        },
        series: [
            {
                name: '累计确诊',
                type: 'line',
                stack: '总量1',
                data: []
            },{
                name: '累计死亡',
                type: 'line',
                stack: '总量2',
                data: []
            },{
                name: '累计治愈',
                type: 'line',
                stack: '总量3',
                data: []
            }
        ]
    };
    // 定义数据格式
    var option3 = {
        tooltip: {
            trigger: 'axis',
            position: function (pt) {
                return [pt[0], '10%'];
            }
        },
        title: {
            left: 'center',
            text: '全球累计确诊人数趋势图',
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        yAxis: {
            type: 'value',
            name: '人数',
            boundaryGap: [0, '100%']
        },
        dataZoom: [{
            type: 'inside',
            start: 0,
            end: 10
        }, {
            start: 0,
            end: 10
        }],
        series: [
            {
                name: '累计确诊人数',
                type: 'line',
                symbol: 'none',
                sampling: 'lttb',
                itemStyle: {
                    color: 'rgb(255, 70, 131)'
                },
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgb(255, 158, 68)'
                    }, {
                        offset: 1,
                        color: 'rgb(255, 70, 131)'
                    }])
                },
                data: []
            }
        ]
    };
    myChart.setOption(option);
    myChart2.setOption(option2);
    myChart3.setOption(option3);

    var fillToTable = function (epidemics) {
        var tbody1 = $("#tbody1");
        tbody1.empty();
        $.each(epidemics, function (index, epidemic) {
            var tr = $("<tr>");
            var td = $("<td>");
            td.text(epidemic.cityName);
            tr.append(td);
            td = $("<td>");
            td.html("" + epidemic.affirmed);
            tr.append(td);

            td = $("<td>");
            td.html("" + epidemic.cured);
            tr.append(td);

            td = $("<td>");
            td.html("" + epidemic.dead);
            tr.append(td);

            td = $("<td>");
            td.html("" + epidemic.suspected);
            tr.append(td);

            tbody1.append(tr);
        });
    };
    function fillGlobalMap(epidemics) {
        var data = [];
        $.each(epidemics, function (index, epidemic) {
            var obj = {};
            obj.name = epidemic.cityName;
            obj.value = epidemic.affirmed;
            data.push(obj);
        });
        myChart.setOption({
            series: [
                {
                   /* name: '累计确诊人数',
                    type: 'map',
                    mapType: 'world',*/
                    data: data
                }
            ]
        });
    };
    function stringToDate (dateStr,separator){
        if (!separator){
            separator= "-" ;
        }
        var  dateArr = dateStr.split(separator);
        var  year = parseInt(dateArr[0]);
        var  month;
        if (dateArr[1].indexOf( "0" ) == 0){
            month = parseInt(dateArr[1].substring(1));
        } else {
            month = parseInt(dateArr[1]);
        }
        var  day = parseInt(dateArr[2]);
        var date = year + "/" + month + "/" + day;
        return  date;
    };
    var fillToChart3 = function (epidemics) {
        var date1 = [];
        var affirmed = [];
        var temp = null;
        $.each(epidemics, function (index, epidemic) {
            temp=stringToDate(epidemic.date);
            console.log(temp);
            date1.push(temp);
            affirmed.push(epidemic.affirmed);
        });
        myChart3.setOption({
            xAxis: {
                data: date1
            },
            series: [{
                data: affirmed
            }]
        });
    };
    var fillToChart2 = function (epidemics) {
        var date = [];
        var data = [];
        var data1= [];
        var data2= [];
        var data3= [];
        var temp = null;
        $.each(epidemics, function (index, epidemic) {
            temp=stringToDate(epidemic.date);
            date.push(temp);
            data1.push(epidemic.affirmed);
            data2.push(epidemic.dead);
            data3.push(epidemic.cured);
        });
        data.push(data1);
        data.push(data2);
        data.push(data3);
        myChart2.setOption({
            xAxis: {
                data: date
            },
            series: [{
                data: data[0]
            },{
                data: data[1]
            },{
                data: data[2]
            }
            ]
        });
    };
    $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/latestGlobalData", {}, function (resp) {
        if (resp.code < 0) {
            alert(resp.msg);
        } else {
            console.log("success");
            fillGlobalMap(resp.data);
            fillToTable(resp.data);
        }
    }, "json");
    //发送请求获取最新疫情数据
    $.get([[${#request.getContextPath()}]]+"/epidemic-info/ajax/dataForGlobalChart", {}, function (resp) {
        if (resp.code < 0) {
            alert(resp.msg);
        } else {
            fillToChart2(resp.data);
            fillToChart3(resp.data);
        }
    }, "json");
</script>
</html>